<template>
    <div class="pd">
        <MyHeader title="商品列表页"></MyHeader>
        <MyTable :list="list">
            <template #header>
                <th>#</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>标签</th>
                <th>操作</th>
            </template>
            <template v-slot:body="{row}">
                <td>{{row.id}}  </td>
                <td>{{row.goods_name}} </td>
                <td>{{row.goods_price}} </td>
                <td>
                    <input
                        v-model.trim="row.inputValue"
                        @keydown.esc="row.inputValue = ''"
                        @keydown.enter="add(row)"
                        @blur="row.inputVisible = false"
                        v-focus 
                        v-if="row.inputVisible" 
                        type="text">
                    <button v-else @click="row.inputVisible = true"  class="btn btn-primary btn-sm">+Tag</button>
                    <br>
                    <span style="margin-right: 5px" 
                    class="badge bg-warning text-dark"
                    v-for="(item,index) in row.tags" :key="index">
                    {{item}}
                    </span>
                </td>
                <td>
                    <button @click="del(row.id)" class="btn btn-danger btn-sm">删除</button>
                </td>
            </template>
        </MyTable>
    </div>
</template>

<script>

    /*
        需求1：在created钩子函数中,data初始化完成时发送请求获取数据,data定义空数组接收
            1.1 下载三方包axios,配置基地址-->axios.default.baseURL=""
            1.2 通过自定义属性将请求得到的数据传递给MyTable
            1.3 使用v-for循环渲染MyTable中tbody的tr

        需求2：使用具名插槽将表头和主体替换,提交组件的复用性
            2.1 使用slot占位并设置name
            2.2 将需要自定义表头和内容分别包裹在template标签中,注意设置v-slot需和v-slot的name一致
            2.3 使用作用域插槽将循环出来的数据传递给template的scope

        需求3：渲染提示符-->使用v-for将数组中的tags数据渲染到页面,添加样式

        需求4：删除功能-->将id绑定给删除按钮,给按钮绑定点击事件将id传入,使用findIndex数组方法删除对应数据

        需求5：添加标签
            5.1 准备静态结构-->input和button
            5.2 控制input和button的互斥展示-->v-if和v-else
            5.3 给按钮绑定点击事件-->将row.inputVisible设置为true;给input绑定blur事件-->改为false
            5.4 自定义指令聚焦-->与data平级设置directives：{focus}
            5.5 键盘修饰符监听enter输入和esc清空
            5.6 添加tag
    */ 
import MyHeader from '../components/MyHeader.vue'
import MyTable from '../components/MyTable.vue'
export default {
    data(){
        return {
            list:[]
        }
    },
    methods:{
        add(row) {
            if (row.inputValue.length === 0) return alert('请输入内容')
            row.tags.push(row.inputValue)
            row.inputValue = ''
        },
        del(id){
            this.list.splice(this.list.findIndex(item=>item.id===id),1)
        }
    },
    components:{
       MyHeader,
       MyTable 
    },
    created(){
      this.$axios.get('/api/goods').then(({data:res})=>{
          console.log(res)
          this.list = res.data
      })
    },
    directives: {
        focus: {
            inserted(el) {
                el.focus()
        }
        }
  }
};
</script>

<style lang="less" scoped>
    .pd {
        padding-top: 45px;
    }
</style>